import Guide from '@/components/Guide';
import { trim } from '@/utils/format';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { useEffect, useState, useTransition } from 'react';
import { flushSync } from 'react-dom';
import styles from './index.less';

const HomePage: React.FC = () => {
  const { name } = useModel('global');
  const [isPending, startTransition] = useTransition();
  useEffect(() => {
    startTransition(async () => {
      await import('@/components/Guide');
    });
  }, []);
  console.log('App组件渲染了！');
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  useEffect(() => {
    document.body.addEventListener('click', async () => {
      flushSync(() => {
        setCount1((count) => count + 1);
      });
      setCount2((count) => count + 1);
    });
    // 在原生js事件中不会进行批处理
  }, []);
  useEffect(() => {
    console.log('111111', isPending);
    // 每次渲染后都会执行此处的代码
  });
  return (
    <PageContainer ghost>
      <div className={styles.container}>
        <Guide name={trim(name)} />
        <div>count1： {count1}</div>
        <div>count2： {count2}</div>
      </div>
    </PageContainer>
  );
};

export default HomePage;
